<template>
  <div v-loading="loading">
    <el-button type="primary" @click="addItem">新增</el-button>
    <div v-for="item in list" :key="item.id" class="an-hang">
      <div class="an-head">
        <span class="an-title" title="点击编辑" @click="editItem(item)">{{item.name}}</span>
        <el-tag
          class="an-tage"
          size="mini"
          :type="item.state == 1 ? 'success' : 'danger'"
        >{{ item.state == 1 ? "显示" : "隐藏" }}</el-tag>
      </div>
      <div class="an-goods-list">
        <div class="an-card" v-for="goods in item.goodsList" :key="goods.id">
          <el-image
            :src="goods.image"
            fit="fill"
            style="width: 80px; height: 80px"
            @click="clickInfo(goods.id)"
          ></el-image>
          <div class="an-close-ico" @click.stop="deleteImg(item, goods.id)">
            <i class="el-icon-close"></i>
          </div>
          <div class="an-name" :title="goods.name">{{ goods.name }}</div>
        </div>
        <div class="an-card an-add-ico" @click="addGoods(item)">
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div>

    <dialog-edit
      v-if="isVisibleEdit"
      v-model:isVisible="isVisibleEdit"
      :tage="tageItem"
      @call-back="getList"
    />
    <goods-info v-if="isVisible" v-model:isVisible="isVisible" :id="goodsID" />

    <!-- 选择添加的商品 -->
    <dialog-goods-list
      v-if="isVisibleGoods"
      v-model:isVisible="isVisibleGoods"
      :tage="tageItem"
      @call-back="getList"
    />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import goodsInfo from "@/components/GoodsInfo/index.vue";
import dialogEdit from "./dialogEdit.vue";
import dialogGoodsList from "./dialogGoodsList.vue";
import { Goods } from "@/utils/interface";

@Options({
  components: {
    goodsInfo,
    dialogEdit,
    dialogGoodsList,
  },
})
export default class majorGoods extends Vue {
  [x: string]: any;
  loading: Boolean = false;
  list: Array<any> = [];
  isVisible: Boolean = false;
  isVisibleEdit: Boolean = false;
  isVisibleGoods: Boolean = false;
  goodsID: number = 0;
  tageItem: Object = {};

  created() {
    this.getList();
  }

  getList() {
    this.loading = true;
    this.API.indexSales().then((res: Array<any>) => {
      this.loading = false;
      this.list = res;
    });
  }

  // 新增模块
  addItem() {
    this.tageItem = {};
    this.isVisibleEdit = true;
  }

  // 添加商品
  addGoods(item: any) {
    this.tageItem = item;
    this.isVisibleGoods = true;
  }

  // 删除商品
  deleteImg(item: any, goodsID: Number) {
    console.log(item);
    let ids: Array<Number> = [];
    item.goodsList.forEach((element: Goods) => {
      if (element.id != goodsID) {
        ids.push(element.id);
      }
    });
    this.API.indexSalesUpdate({
      id: item.id,
      goodsIDS: ids.toString(),
    }).then(() => {
      this.getList();
    });
  }

  // 编辑标题
  editItem(item: any) {
    this.tageItem = item;
    this.isVisibleEdit = true;
  }

  // 查看
  clickInfo(id: number) {
    this.goodsID = id;
    this.isVisible = true;
  }
}
</script>

<style lang="scss" scoped>
@import "../../../style/mixin.scss";
.an-hang {
  margin-bottom: 15px;
}
.an-head {
  .an-title {
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .an-tage {
    margin: 0 10px;
  }
}
.an-goods-list {
  display: flex;
  .an-card {
    margin: 5px 8px;
    border: 1px solid #dedede;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    .an-name {
      text-align: center;
      width: 80px;
      @include text-overflow-nowrap-ellipsis();
    }
    .an-close-ico {
      display: none;
    }
    &:hover {
      .an-close-ico {
        display: block;
      }
    }
    &.an-add-ico {
      width: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        color: #dedede;
        font-size: 28px;
      }
    }
  }
}
</style>